﻿{block name='shirts'}

    <div class="divCenter">
        {foreach name=outer item=shirt from=$shirts}
            <div class="shirtSticker">
                <img id="shirt-img-{$shirt.id}" class="shirtThumb" src="img/shirts/{$shirt.id}-small.png" alt="shirt" />
                <div class="shirtInfo">
                    <form class="shirtForm" id="form-{$shirt.id}" >
                        <span class="shirtTitle">{$shirt.title}</span>
                        <span class="shirtPrice">{$shirt.price}€</span>
                        <br />
                        <span class="shirtBrand">{$shirt.brand}</span>
                        <span class="shirtMaterial" >({$shirt.material})</span>
                        <br />
                        <input class="sexH" type="radio" name="sex" value="H" onclick="updateShirt({$shirt.id})" checked >H</input>
                        <input class="sexF" type="radio" name="sex" value="F" onclick="updateShirt({$shirt.id})">F</input>

                        <select name="size" class="shirtSize" onclick="updateShirt({$shirt.id})">
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="XXL">XXL</option>
                        </select>

                        <input name="quantity" type="number" name="quantity" min="1" value="1" class="shirtQuantity" />

                        <span class="shirtColor" style="background-color:#e60024;" onclick="changeShirtColor({$shirt.id}, 'red');" ></span>
                        <span class="shirtColor" style="background-color:#d3d9e5;" onclick="changeShirtColor({$shirt.id}, 'grey');" ></span>
                        <span class="shirtColor" style="background-color:#ffd800;" onclick="changeShirtColor({$shirt.id}, 'yellow');" ></span>
                        <span class="shirtColor" style="background-color:#17a5de;" onclick="changeShirtColor({$shirt.id}, 'blue');" ></span>
                        <span class="shirtColor" style="background-color:#89d165;" onclick="changeShirtColor({$shirt.id}, 'green');" ></span>


                        <button type="button" class="shirtSeeButton" class="poplight" onclick="loadInfo({$shirt.id});"><img src="img/menu/find-small.png" alt="cart" /></button>
                        <button type="button" class="shirtBuyButton" onclick="buyShirtId({$shirt.id});"><img src="img/menu/cart-small.png" alt="cart" /></button>

                        <input name="color" class="shirtColorValue" type="hidden" />
                        <input name="id" class="shirtID" type="hidden"  value="{$shirt.id}" />
                    </form>
                </div>
            </div>	
        {/foreach}
		
		{if $shirts|@count eq 0}Aucun t-shirt ne correspond à vos critères.{/if}
    </div>

    <div id="shirtPopup" class="popupBlock">
    </div>

{/block}

{block name='javascript'}
    <script type="text/javascript" src="pages/controller/js/store.js"></script>
    <script type="text/javascript">

	//JQuery main entry point
	$(document).ready(function() {
        {foreach name=outer item=shirt from=$shirts}
			selectRandomColor({$shirt.id});
        {/foreach}
		$('.displayShirt').hide();

		//Close Popups and Fade Layer
		$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
			closeInfo();
			return false;
		});


	});
    </script>
{/block}